<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1 获取属性值
      element.属性  获取属性值
      element.getAttribute('属性')；

      区别 ：
            element.属性  获取内置属性值 （元素本身自身的属性）
            element.getAttribute('属性')； 主要获得自定义的属性 （标准） 我们程序员自定义的属性
     -->
     <div id="demo"  index = '1' class="nav"></div>
     <script>
         var div = document.querySelector('div');
        //  1 获取元素属性值
        //（1）element.属性
        console.log(div.id);
        //（2）element.getAttribute('属性')； index 就是我们自定义的属性值
        console.log(div.getAttribute('id'));

     </script>

     <!-- 2 设置属性值
                     element.属性 = '值'  设置内置属性值
                     element.setAttribute('属性','值');
    -->
        <script>
            // 1
            div.id = 'test';

            div.className = 'navs';
            // 2   element.setAttribute('属性','值');  主要针对于自定义属性
            div.setAttribute('index',2);
            div.setAttribute('class','fotter');  //class 特殊 这里面写的就是class 不是 className

        </script>
        <!-- 3 移除属性值
                        element.removeAttribute('属性');

        -->
        <script>
            //  移除index 属性
            div.removeAttribute('index');
        </script>
</body>
</html>